<template>
    <div id="employee">
        <a-button style="background-color: #5ADBB6; color:#fff;" @click="showModal">新增</a-button>
        <a-modal v-model:open="open" title="员工新增" @ok="handleOk" style="width: 1000px;">
            <div class="form">
                <a-form :model="formState" name="basic">
                    <div class="one"
                        style="width: 100%;height: 90px; display: flex;justify-content: space-between; align-items: center;">
                        <div style="width: 30%; height: 45px; ">
                            <a-form-item label="姓名" name="username" style="display: flex; align-items: center;"
                                :rules="[{ required: true, message: '请输入姓名！' }]">
                                <a-input v-model:value="formState.username" placeholder="请输入手机号"
                                    style="height: 45px;" />
                            </a-form-item>
                        </div>
                        <div style="width: 30%; height: 45px;">
                            <a-form-item label="员工编号" name="code" style="display: flex; align-items: center;"
                                :rules="[{ required: true, messag: '请输入手机号！' }]">
                                <a-input v-model:value="formState.code" placeholder="请输入手机号" style="height: 45px;" />
                            </a-form-item>
                        </div>
                        <div class="avatar"
                            style="width: 30%; display: flex; justify-content: center; align-items: center;">
                            <div>头像：</div>
                            <div>
                                <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card"
                                    class="avatar-uploader" :show-upload-list="false"
                                    action="http://localhost:3000/upload" :before-upload="beforeUpload"
                                    @change="handleChange">
                                    <img style="width: 50px; height:50px;" v-if="formState.imgUrl"
                                        :src="formState.imgUrl" alt="avatar" />
                                    <div v-else>
                                        <loading-outlined v-if="loading"></loading-outlined>
                                        <plus-outlined v-else></plus-outlined>
                                        <div class="ant-upload-text">Upload</div>
                                    </div>
                                </a-upload>
                            </div>
                        </div>
                    </div>
                    <div class="two"
                        style="width: 100%;height: 90px; display: flex;justify-content: space-between; align-items: center;">
                        <div style="width: 30%; height: 45px; ">
                            <a-form-item label="手机号" name="phone" style="display: flex; align-items: center;"
                                :rules="[{ required: true, message: '请输入手机号！' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号！' }]">
                                <a-input v-model:value="formState.phone" placeholder="请输入手机号" style="height: 45px;" />
                            </a-form-item>
                        </div>
                        <div style="width: 30%; height: 45px;">
                            <a-form-item label="角色" name="roleid">
                                <a-select v-model:value="formState.roleid" placeholder="请选择角色" style="height: 45px;">
                                    <a-select-option v-for="item in roleList" :key="item._id" :value="item._id">{{
                                        item.name }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </div>
                        <div style="width: 30%; height: 45px;">
                            <a-form-item label="员工密码" name="password" style="display: flex; align-items: center;"
                                :rules="[{ required: true, message: '请输入密码！' }]">
                                <a-input v-model:value="formState.password" placeholder="请输入员工密码"
                                    style="height: 45px;" />
                            </a-form-item>
                        </div>
                    </div>
                    <div class="three">
                        <a-form-item label="状态" name="status">
                            <a-switch v-model:checked="formState.status" />
                        </a-form-item>
                    </div>
                    <div class="four">
                        <a-form-item label="备注" name="desc">
                            <a-textarea v-model:value="formState.remark" />
                        </a-form-item>
                    </div>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { h, ref } from 'vue';
import { reactive } from 'vue';

//上传头像
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import houseApi from '@/axios';

function getBase64(img: Blob, callback: (base64Url: string) => void) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref<boolean>(false);
const handleChange = (info: UploadChangeParam) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url: string) => {
            formState.imgUrl = base64Url;
            loading.value = false;
        });
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};

const beforeUpload = (file: UploadProps['fileList'][number]) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};

//弹出层
const open = ref<boolean>(false);
const showModal = () => {
    open.value = true;
};

const handleOk = async (e: MouseEvent) => {
    open.value = false;
    const { data: { code, msg } } = await houseApi.post('/addUser', formState);
    if (code === 200) {
        message.success(msg);
        formState.username = '';
        formState.code = '';
        formState.phone = '';
        formState.password = '';
        formState.status = true;
        formState.remark = '';
        formState.roleid = '';
        formState.imgUrl = '';
    } else {
        message.error(msg);
    }
};

//表单框
interface FormState {
    username: string;
    code: string;
    phone: string;
    password: string;
    status: boolean;
    remark: string;
    roleid: string;
    imgUrl: string;
}

const formState = reactive<FormState>({
    username: '',
    code: '',
    phone: '',
    password: '',
    status: true,
    remark: '',
    roleid: '',
    imgUrl: ''
});

//获取角色
let roleList: any[] = [];
const getRoleList = async () => {
    const { data: { code, data } } = await houseApi.get('http://localhost:3000/rolelist');
    if (code === 200) {
        roleList = data;
    }
}
getRoleList();

</script>
<style scoped lang="scss">
.avatar-uploader>.ant-upload {
    width: 50px;
    height: 50px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader css-dev-only-do-not-override-1p3hq3p {
    border: none;
    margin: 0px;
}
</style>
